<template>
<el-drawer :model-value="isShow" :before-close="handleClose" :size="curDrawerSize">
  <template #header="{ titleId, titleClass }">
    <div class="zs-drawer-header" :id="titleId" :class="titleClass">
      <div class="zs-icon zs-text-blue zs-space-right-sm">
        <el-icon> <Grid /> </el-icon>
      </div>
      <div class="zs-title zs-text-black">{{ drawerTitle }}</div>
    </div>
  </template>
  <template #default>
    <el-container class="zs-drawer-container">
      <el-scrollbar class="zs-drawer-content">
        <el-form ref="dataForm" :model="formData.data" :rules="formData.rules" label-width="auto">
          <div class="zs-align-center zs-space-bottom" id="detail-drawer-subjectName">
            <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
            <div class="zs-title">{{ curNodeList[0].name }}</div>
          </div>
          <div class="zs-card zs-space-bottom">
            <el-form-item label="计算依据：" prop="details">
              <el-input 
                disabled
                v-model="formData.data.details" 
                type="textarea" 
                :autosize="{ minRows: 5, maxRows: 5 }" 
              />
            </el-form-item>
          </div>
          <template v-for="item in formData.data.list" :key="item.id">
            <div class="zs-align-center zs-space-bottom zs-space-top-lg" :id="item.id">
              <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
              <!-- <div class="zs-title">参数{{ (index+1) + item.name }}</div> -->
              <div class="zs-title">{{ item.name }}</div>
            </div>
            <div class="zs-card zs-space-bottom">
              <el-form-item label="计算依据：" v-if="!isHotel">
                <el-input 
                  disabled
                  :value="item.details && item.details.replaceAll('\n','\n\n')" 
                  type="textarea" 
                  :autosize="{ minRows: 5, maxRows: 5 }" 
                />
              </el-form-item>
              <el-form-item v-for="(monthItem,index) in monthKeyList" :key="monthItem" :label="index == 0 ? '费用合计：' : (index)+'月：'">
                <el-input class="zs-input-group-md" :value="formatArea(item.val[monthItem],2)" disabled>
                  <template #append>
                    <div>元</div>
                  </template>
                </el-input>
              </el-form-item>
              <div style="text-align: right;">
                <el-button class="zs-link" link size="small" @click="()=>openDetailTableDrawer(item)">明细</el-button>
              </div>
            </div>
          </template>
          <!-- <template v-if="!isHotel && formData.data.list.length > 0">
            <div class="zs-align-center zs-space-bottom zs-space-top-lg" id="detail-drawer-yearBonus">
              <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
              <div class="zs-title">年度绩效奖金</div>
            </div>
            <div class="zs-card zs-space-bottom">
              <el-form-item label="费用合计：" prop="total">
                <el-input class="zs-input-group-md" :value="total" disabled>
                  <template #append>
                    <div>元</div>
                  </template>
                </el-input>
              </el-form-item>
              <template v-if="formData.data.courseNumber === '2.2.1'">
                <el-form-item label="EBITDA完成率：" prop="courseName">
                  <el-input class="zs-input-group-md" :value="total" disabled>
                    <template #append>
                      <div>%</div>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item v-for="item,index in standandList" :key="item.key" prop="courseName">
                  <template #label>
                    <label>
                      完成率标准{{ index+1 }}
                      <el-tooltip
                        :content="item.contract"
                        placement="top"
                      >
                        <img class="img-icon" :src="descriptionImg" alt="加载失败" />
                      </el-tooltip>
                      ：
                    </label>
                  </template>
                  <el-input class="zs-input-group-md" :value="total" disabled>
                    <template #append>
                      <div>元</div>
                    </template>
                  </el-input>
                </el-form-item>
              </template>
              <template v-else-if="formData.data.courseNumber === '2.2.2'">
                <el-form-item label="年度绩效奖金：" prop="courseName">
                  <el-input class="zs-input-group-md" :value="total" disabled>
                    <template #append>
                      <div>元</div>
                    </template>
                  </el-input>
                </el-form-item>
              </template>
            </div>
          </template> -->
        </el-form>
      </el-scrollbar>
      <hsDocWrapper v-if="isShow" :nodeList="curNodeList"></hsDocWrapper>
    </el-container>
  </template>
  <!-- <template v-if="!isReadOnly" #footer>
     <el-button class="zs-btn-md zs-btn-primary" @click="handleSave">保存</el-button>
  </template> -->
</el-drawer>
<DetailTableDrawer 
  v-model:isShow="detailTableInfo.isShow"
  :drawerTitle="detailTableInfo.title"
  :courseNameType="detailTableInfo.courseNameType"
  :projectCode="formData.data.projectCode"
  :courseNumber="formData.data.courseNumber"
  :currentYear="currentYear"
  :currentMonth="currentMonth"
/>
</template>

<script setup>
// import DocWrapper from "@/components/DocWrapper.vue";
// import descriptionImg from '@/assets/description.png';
import DetailTableDrawer from './detail-table-drawer.vue';
import { formatArea } from '@/utils/publicUtils'
import { nextTick, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
let store = useStore();
// 定义抽屉大小
const curDrawerSize = ref(store.state.uiDrawerSize);
// 定义抽屉锚点菜单
const curNodeList = ref([
 { name:'科目名称', id:'detail-drawer-subjectName' },
]);
// 抽屉传值
const props = defineProps({
  // 控制是否打开抽屉
  isShow: { type: Boolean, default: false },
  isHotel: { type: Boolean },
  // 抽屉标题
  drawerTitle: { type: String },
  currentYear: { type: String },
  currentMonth: { type: String },
  // 是否禁用
  isReadOnly: { type: Boolean },
  // 当前数据
  currentData: { type: Object }
});
// 监听传值抽屉打开状态
watch(() => props.currentData,
  (newVal) => {
    setFormData(newVal);
});
// 定义更新事件
const emits = defineEmits(["update:isShow"]);
// 关闭抽屉事件
function handleClose() {
  // curNodeList.value.splice(1,formData.data.list.length + (props.isHotel ? 1 : 0))
  dataForm.value.resetFields()
  emits("update:isShow", false);
  curNodeList.value[0].name = '科目名称'
  curNodeList.value = curNodeList.value.slice(0,1)
}
// // 抽屉提交事件
// function handleSave() {
//   dataForm.value.validate((valid)=>{
//     if (!valid) return
//   })
// }
let dataForm = ref()
// let total = ref('')
// let standandList = ref([
//   {key:'a', contract:'EBITDA完成率 ≤ 60%'},
//   {key:'b', contract:'60% < EBITDA完成率 ≤ 80%'},
//   {key:'c', contract:'80% < EBITDA完成率 ≤ 100%'},
//   {key:'d', contract:'100% < EBITDA完成率 ≤ 110%'},
//   {key:'e', contract:'EBITDA完成率 > 110%'},
// ])
let monthKeyList = Array(13).fill(0).map((el,index)=>`month${index == 0 ? 'Sum' : index }`)
let formData = reactive({
  data:{
    details:'',
    list:[]
  }
})

function setFormData(data) {
  curNodeList.value[0].name = data.courseName
  let menu = data.list.map(el=>{ return {name:el.name,id:el.id} })
  curNodeList.value = [curNodeList.value[0], ...menu]
    // if (!props.isHotel) {
    //   curNodeList.value.push({name:'年度绩效奖金', id:'detail-drawer-yearBonus'})
    // }
  nextTick(()=>{
    formData.data = data
  })
}

let detailTableInfo = reactive({
  title:'',
  isShow:false,
  courseNameType:''
})

function openDetailTableDrawer(item){
  detailTableInfo.isShow = true
  detailTableInfo.title = item.name
  detailTableInfo.courseNameType = item.type
}
</script>

<style lang="scss" scoped>
.img-icon {
    position: relative;
    top: 3px;
    width: 14px;
    margin: 0 2px;
  }
</style>
